<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="/css/bootstrap.min.css"  crossorigin="anonymous">
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"  crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script> -->
    <script src="/assets/js/vue.min.js"  crossorigin="anonymous"></script>
    <script src="/assets/js//axios.min.js"  crossorigin="anonymous"></script>
    <title>模拟测试</title>
    <style>
        .views{
            height: 96px;
            width: 480px;
            border: 1px solid #dee2e6;
        }
        .fangge{
            float: left; 
            height: 100%;
            width:20%;
            border: 1px solid #dee2e6;
            font-size: 20px;
            padding-left: 35px;
            padding-top: 25px;
        }
    </style>
  </head>
  <body>
    <div id="ninelineDiv">
        <div  class="card" style="float: left;margin-left: 35%; width: 500px;height: 100%;box-shadow:
    5px 5px 5px #00000014,
    5px -5px 5px #00000014,
    -5px 5px 5px #00000014,
    -5px -5px 5px #00000014;">
        <!-- <img src="..." class="card-img-top" alt="..."> -->
        <div class="card-body">
          <!-- <div style="width: 450px;height: 270px;border: 1px solid gray;"> -->
            <div class="row views" v-for="(arr,index) in views">
                <div  class="fangge" v-for="(item,index) in arr">
                    {{item}}
                </div>
            </div>
            
          <!-- </div> -->
          <div style="width: 100%;margin-top: 10px;">
            <input type="text" class="form-control col-lg-6" v-model="subForm.userId" placeholder="随便输入用户ID" aria-label="Recipient's username" aria-describedby="basic-addon2" style="float:left;">
            <!-- <button type="button" class="btn btn-primary" style="margin-left: 15px;float: left;">登录</button> -->
            <button type="button" class="btn btn-success" style="margin-left: 15px;float: left;" v-on:click="startGame">开始游戏</button>
            <button type="button" class="btn btn-success" style="margin-left: 15px;float: left;" v-on:click="autoGame">自动游戏</button>
          </div>
          <div style="width: 100%;margin-top: 60px;">
            <!-- <input type="text" class="form-control col-lg-6" placeholder="输入充值金额" aria-label="Recipient's username" aria-describedby="basic-addon2" style="float:left;"> -->
            <!-- <button type="button" class="btn btn-primary" style="margin-left: 15px;float: left;">登录</button> -->
            <!-- <button type="button" class="btn btn-primary" style="margin-left: 15px;float: left;">充值</button> -->
          </div>
          <div>
            <h3 class="card-title" style="display: block;float: left;width: 200px;margin-top: 15px;"><span class="badge badge-secondary" >此用户总数据</span></h3>
            <button type="button" class="btn btn-danger" style="margin-left: 100px;margin-top: 15px;" v-on:click="clearUserData">清除</button>
            <table class="table table-bordered">
                <tbody style="text-align: center;" id="userPage">
                <!--class的属性代表框框颜色给了4种-->
                    <!-- <tr>
                        <td >剩余金币</td>
                        <td >100</td>
                    </tr> -->
                    <tr>
                        <td >总下注</td>
                        <td >{{statInfo.totalBet}}</td>
                    </tr>
                    <tr >
                        <td >总盈利</td>
                        <td >{{statInfo.totalWin}}</td>
                    </tr>
                </tbody>
            </table>
          </div>
          <div>
            <h3 class="card-title" style="display: block;float: left;width: 200px;margin-top: 15px;"><span class="badge badge-secondary" >平台总数据</span></h3>
            <button type="button" class="btn btn-danger" style="margin-left: 100px;margin-top: 15px;" v-on:click="clearSystemData">清除</button>
            <table class="table table-bordered">
                <tbody style="text-align: center;" id="userPage">
                <!--class的属性代表框框颜色给了4种-->
                    <tr>
                        <td >总下注</td>
                        <td >{{statInfo.platTotalBet}}</td>
                    </tr>
                    <tr >
                        <td >总盈利</td>
                        <td >{{statInfo.platTotalWin}}</td>
                    </tr>
                </tbody>
            </table>
          </div>
          <!-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> -->
          <button type="button" class="btn btn-danger" style="margin-left: 180px;margin-top: 15px;" v-on:click="stopGame">停止测试</button>
        </div>
      </div>
      <div style="width: 400px;height:400px;float: left;margin-top: 20px;" >
        <span class="badge badge-secondary" style="font-size: 15px;">本局连线与得分</span>
        <table class="table table-bordered" style="margin-top: 10px;">
            <tbody style="text-align: center;" id="userPage">
            <!--class的属性代表框框颜色给了4种-->
                <tr>
                    <td >图片</td>
                    <td >连线</td>
                    <td >倍数</td>
                </tr>
                <tr v-for="(arr,index) in winLines">
                    <td >{{arr.image}}</td>
                    <td >{{arr.line}}</td>
                    <td >{{arr.multiplier}}</td>
                </tr>
            </tbody>
        </table>
        <table class="table table-bordered">
            <tbody style="text-align: center;" id="userPage">
            <!--class的属性代表框框颜色给了4种-->
                <tr>
                    <td >总下注</td>
                    <td >9</td>
                </tr>
                <tr>
                    <td >连线得分</td>
                    <td >{{wins.lineScore}}</td>
                </tr>
                <tr>
                    <td >免费游戏</td>
                    <td >{{freeCount}}</td>
                </tr>
                <tr>
                    <td >jackpot</td>
                    <td >{{wins.jackpotScore}}</td>
                </tr>
            </tbody>
        </table>
      </div>
    </div>
  </body>
  <script src="/js/nineline.js"  crossorigin="anonymous"></script>
</html>